<template>
    <div class="buhl">
        <div class="header">
            <div class="search">
                <span class="pubile">发布</span>
            </div>
        </div>
        <div class="cc">
            <van-cell-group>
                <van-field v-model="value" placeholder="请输入标题"></van-field>
            </van-cell-group>
            <van-field readonly clickable name="picker" :value="value1" placeholder="请选择" @click="showPicker = true" />
            <van-popup v-model="showPicker" position="bottom">
                <van-picker show-toolbar :columns= "columns" @confirm="onConfirm" @cancel="showPicker = false"/>
            </van-popup>
        </div>
        <div class="global"> 
            <van-field class="conten" v-model="message"  type="textarea" placeholder="请输入内容" />
        </div>
        <div class="total">
            <van-uploader v-model="fileList" :after-read="afterRead" multiple :max-count="3"/>
        </div>
        <div class="an">
            <van-button type="primary" block @click="announced">发布</van-button>
        </div>
    </div>
</template>
<script>
import { getToken } from '@/until/auth'

export default {
    data() {
        return {
        value: '', //标题
        value1:'',  //
        message:'',
        fileList: [],
        columns: [],
        showPicker: false,
        name:'',
        columnsall:[],
        id:0,
        active_name:'',
        active_id:'',
        imageSrc:[]
        }
    },
    created(){
        this.columnsall = JSON.parse(localStorage.getItem('arr'))
        this.columnsall.forEach(element => {
            this.columns.push(element.name)
        });
        let token = getToken()
        this.$http.post('/user/getuserInfo',{
            token:token
        })
        .then((res)=>{
            this.active_name = res.userInfo.nickname
            this.active_id = res.uid
        })
        .catch((error)=>{
            console.log(error)
        })
    },
    methods: {
        async afterRead(file){
                let files = file.file
                let { type } = files;
                //拿到类型  比如jpg
                type = type.split('/')[1];  
                // 重新命名
                let file_name = `${new Date().getTime()}_${Math.random()
                    .toString(36)
                    .slice(2)}.${type}`;
                // 去自己的服务器拿到上传七牛云需要的 token  为何放在服务端呢?  主要是为了安全，因为里边包含了一些账号信息
                let { token } = await this.$http.post('/upload/token');
                
                // new一个form data   并且把文件 token  和文件的名字放进去  file token key是固定的 不能改 
                const formdata = new FormData();
                formdata.append('file', file);
                formdata.append('token', token);
                formdata.append('key', file_name);
                // https://upload-z1.qiniup.com 是上传到七牛的真正接口  其中z1是华北区域
                let result = await this.$http.post('https://upload-z1.qiniup.com', formdata);
                console.log(result);
                console.log(`http://toutiao.longxiaokj.com/` + result.key);
                this.imageSrc.push(`http://toutiao.longxiaokj.com/` + result.key)
                // `http://toutiao.longxiaokj.com/` + result.key  这个地址就是传到服务器的地址  
                // 发布文章时 imageSrc  字段需要的就是这个
        },
		onFailed(errorInfo) {
			console.log('failed', errorInfo);
		},
		onConfirm(value1,index) {
			this.value1 = value1;
            console.log(value1)
            this.id = index
			this.showPicker = false;
		},
        announced(){
            let cate_id = this.columnsall[this.id]._id
            this.$http.post('/api/add_article',{
                title:this.value,
                content:this.message,
                cate_name:this.value1,
                cate_id:cate_id,
                author:this.active_name,
                author_id:this.active_id,
                imageSrc:this.imageSrc
            })
            .then((res)=>{
                console.log(res)
            })
            .catch((error)=>{
                console.log(error)
            })
        }
	},
    
}
</script>
<style>
html{
    background-color: #f5f7f9;
}
.buhl{
    background-color: #f5f7f9;
}
.header{
    width:100%;
    height:46px;
    background-color: #07c160;
    padding-top: 7px;
    box-sizing: border-box;
}
.search{
    color: #fff;
    line-height: 32px;
}
.pubile{
    font-size: 15px;
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
}
.cc{
    background-color: #f5f7f9;
    border: 1px solid #fff;
}
.global{
    padding-top: 10px;
    height: 100px;
}
.total{
    padding-top: 10px;
    background-color: #fff;
    padding-bottom: 10px;
}
.an{
    width: 90%;
    margin:0 auto;
    text-align: center;
    background-color: rgb(7,193,96);
}
.conten{
    height: 100px;
    padding-top: 10px;
}
</style>